<template>
  <el-dialog v-model="drawer" title="屏蔽17+好友设置" :append-to-body="true" width="400px" @close="close">
    <el-table size="small" ref="multipleTable" :data="list" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column label="用户昵称" prop="label" width="100px"></el-table-column>
        <el-table-column label="所属公司" prop="company"></el-table-column>
    </el-table>
    <div class="page-block">
        <el-pagination
            v-model:currentPage="current"
            :small="true"
            :disabled="false"
            :background="false"
            layout="total, prev, pager, next, jumper"
            :total="total"
            :hide-on-single-page="true"
            @current-change="handleCurrentChange"
        />
    </div>
    <template #footer>
        <el-row justify="center">
            <el-button size="small" type="primary" @click="submitTable">保存</el-button>
            <el-button size="small" type="default" @click="cancelTable">取消</el-button>
        </el-row>
    </template>
  </el-dialog>
</template>

<script>
import { computed, reactive, toRefs, watch, nextTick, ref, onMounted } from 'vue'
export default {
    name: 'Friend',
    props: {
        dialogDrawer: {
            type: Boolean,
            default: false
        },
        selected: {
            type: Array,
            default: () => {
                return []
            }
        }
    },
    setup(props, context) {
        const { dialogDrawer, selected } = toRefs(props)
        const drawer = computed({
            get: () => dialogDrawer.value,
            set: val => {
                context.emit('update:dialogDrawer', val)
            }
        })
        const selectedArr = computed({
            get: () => selected.value,
            set: val => {
                state.multipleSelection = val
            }
        })
        const multipleTable = ref()
        const state = reactive({
            list: [],
            current: 1,
            total: 20,
            multipleSelection: selectedArr.value || []
        })
        const close = () => {
            context.emit('update:dialogDrawer', false)
            multipleTable.value.clearSelection()
        }
        const handleSelectionChange = val => {
            state.multipleSelection = val
        }
        const handleCurrentChange = e => {
            state.current = e
            getList()
        }
        // 监听dialog显示关闭
        watch(() => dialogDrawer.value,
            val => {
                if(val)  {
                    if(state.list.length < 1) {
                       getList()
                    }else{
                        setSelected()
                    }
                }
            }
        )
        const getList = () => {
            state.list = [{
                id: 1,
                label: '好友1',
                company: 'burger有限公司'
            },{
                id: 2,
                label: '好友2',
                company: 'burger有限公司'
            }]
            setSelected()
        }
        const setSelected = () => {
            nextTick(() => {
                if(multipleTable.value) {
                    multipleTable.value.clearSelection()
                    selectedArr.value.forEach((row) => {
                        state.list.find(obj => {
                            if(obj.id == row.id){
                                multipleTable.value.toggleRowSelection(obj, true)
                            }
                        })
                    })
                }   
            })
        }
        // 保存修改
        const submitTable = () => {
            context.emit('update:selected', state.multipleSelection)
            close()
        }
        // 取消修改
        const cancelTable = () => {
            close()
        }
        onMounted(() => {
            getList()
        })
        return {
            ...toRefs(state),
            drawer,
            close,
            handleSelectionChange,
            handleCurrentChange,
            multipleTable,
            submitTable,
            cancelTable
        }
    }
}
</script>

<style>

</style>